import React, {useState} from "react"
import {Row, Col, Button} from "reactstrap"
import {Filter} from "react-feather"
import {EVENTS_MODAL_STATUS, SET_EVENTS_PAGINATION} from '../../../redux/constants/events'
import {parseUnixTime} from '../../../helpers/utils'
import "flatpickr/dist/flatpickr.min.css";
import "../../../assets/scss/plugins/forms/flatpickr/flatpickr.scss"
import EventSearch from "./EventSearch";
import EventsItem from "./EventsItem"
import Paginate from "../../../components/@vuexy/paginate";
import FullSpinnerDimming from "../../../components/@vuexy/spinner/Full-spinner-dimming";
import EventFlatpickr from "./EventFlatpickr";

const EventsContent = React.memo(props => {
  const {events, mainSidebar, setFieldData, userFilterData, setData, spinner, setSpinner, minHeight} = props
  const filterDataLength = typeof userFilterData === "object" && Object.values(userFilterData).filter(Boolean).length
  const [dateStart, setDateStart] = useState('')
  const [dateEnd, setDateEnd] = useState('')

  const onPageChange= page => {
    setData(SET_EVENTS_PAGINATION, page)
    //setSpinner('events-list')
  }

  return (
    <React.Fragment>
      { spinner.includes('events-list') && <FullSpinnerDimming /> }
      <div className="shop-content events-content" style={{minHeight: minHeight}}>
        <Row>
          <Col sm="12 mb-2">
            <Row>
              <Col md={6}>
                <EventSearch setFieldData={setFieldData} userFilterData={userFilterData} />
              </Col>
              <Col md={6} className="mt-1 mt-md-0">
                <div className="events__filter-header-items">
                  <div className="events__filter-date-items">
                    <EventFlatpickr
                      type="from"
                      placeholder="01-01-2020"
                      value={userFilterData.from ? parseUnixTime(userFilterData.from) : ''}
                      maxDate={dateEnd ? new Date(dateEnd) : ''}
                      setDate={setDateStart}
                      setFieldData={setFieldData}
                    />
                    <div className="events__filter-date-desc">до</div>
                    <EventFlatpickr
                      type="to"
                      placeholder="31-12-2020"
                      value={userFilterData.to ? parseUnixTime(userFilterData.to) : ''}
                      minDate={dateStart ? new Date(dateStart) : ''}
                      setDate={setDateEnd}
                      setFieldData={setFieldData}
                    />
                  </div>
                  <div className="events__group-header-btn d-flex d-lg-block">
                    <div className="events__filter-header-item events__filter-header-button flex-grow-1">
                      <Button.Ripple
                        block
                        color="primary"
                        className="events__add-btn btn-block px-md-6"
                        onClick={() => setData(EVENTS_MODAL_STATUS, true)}
                      >
                        Добавить событие
                      </Button.Ripple>
                    </div>
                    <div className="events__filter-toggler d-block d-lg-none">
                      <Button.Ripple outline color="primary" onClick={mainSidebar}>
                        <Filter size={18} />
                      </Button.Ripple>
                    </div>
                  </div>
                </div>
              </Col>
            </Row>
          </Col>
          <Col sm="12">
            <div id="ecommerce-products">
              <Row>
                {
                  (events.data && events.data.length) ?
                    events.data.map(item => (
                      <EventsItem  data={item} key={item.id}/>
                    ))
                    : filterDataLength > 4
                    ? <div className="p-2">
                      <p>По вашему запросу ничего не найдено</p>
                    </div>
                    : ''
                }
              </Row>
            </div>
          </Col>
        </Row>
        {
          events.meta && <Paginate pagination={events.meta.pagination} onPageChange={onPageChange}/>
        }
      </div>
    </React.Fragment>
  )
})

export default EventsContent
